<template>
  <a-upload
    :multiple="true"
    :file-list="fileList"
    accept=".docx, .doc, .xlsx, .xls, .pdf, .jpeg, .png"
    :before-upload="beforeUpload"
    :remove="handleFileRemove"
    @change="handleChange"
    :class="{ 'disabled-no-removeIcon': disabled, uploadList: isScroll && fileList.length>0 }"
  >
    <a-button v-if="!isShow">
      <a-icon type="upload" />
      上传文件
    </a-button>
  </a-upload>
</template>

<script>
import { uploadAction, getAction } from '@/api/manage'

export default {
  name: 'ZUpload',
  props: {
    fileid: {
      type: String,
      default: '',
    },
    isShow: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isScroll: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      saveFiles: '/sys/common/sjUpload',
      getFiles: '/sjzyzhgl/sjFileInfo/commonFileInfo',
      removeFilse: '/sjzyzhgl/sjFileInfo/removeAffix',
      fileList: [
        // {
        //   uid: '-1',
        //   name: 'xxx.png',
        //   status: 'done',
        //   url: 'http://www.baidu.com/xxx.png',
        // },
      ],
    }
  },
  watch: {
    fileid: {
      handler: function (val) {
        console.log('flie', val)
        this.fileList = []
        this.getFile()
      },
      immediate: true,
    },
  },

  methods: {
    beforeUpload() {
      return false
    },
    handleChange(info) {
      let fileList = [...info.fileList]
      fileList = fileList.map((file) => {
        if (file.response) {
          file.url = file.response.url
        }
        return file
      })
      this.fileList = fileList
    },
    saveFile(path) {
      const { fileList } = this
      if (fileList.length > 0) {
        let formData = new FormData()
        fileList.forEach((file) => {
          if (file.originFileObj) {
            formData.append('files', file.originFileObj)
          }
        })
        formData.append('biz', path)
        formData.append('id', this.fileid || '')
        uploadAction(this.saveFiles, formData).then((res) => {
          if (res.success) {
            this.$emit('uploadFile', res.result.id)
          } else {
            this.$emit('uploadFile')
          }
        })
      } else {
        this.$emit('uploadFile')
      }
    },
    handleFileRemove(file) {
      console.log(file)
      if (file.status) {
        getAction(this.removeFilse, { id: file.uid }).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            return true
          } else {
            this.$message.error(res.message)
            return false
          }
        })
      } else {
        return true
      }
    },
    getFile() {
      getAction(this.getFiles, { id: this.fileid }).then((res) => {
        if (res.success && res.result) {
          this.fileList = res.result.affixList.map((item, index) => {
            return {
              name: item.fileName,
              uid: item.id,
              status: 'done',
              url: `${window._CONFIG['domianURL']}/sys/common/static/${item.url}`,
            }
          })
        } else {
          console.log(res)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-upload {
  position: absolute;
  left: -60px;
  top: 3px;
}
.uploadList {
  /deep/ .ant-upload-list {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
}
/deep/ .ant-upload-list {
  display: flex;
  margin-left: 5px;
  margin-top: 8px;

  .ant-upload-list-item {
    height: 25px;
    line-height: 25px;
    margin-top: 0;
  }

  .ant-upload-list-item-info {
    padding: 0 25px 0 5px;
  }

  .ant-upload-list-item-card-actions {
    right: 0;
  }
}
.disabled-no-removeIcon {
  /deep/.ant-upload-list-item-card-actions {
    display: none;
  }
}
</style>